import React from 'react';
import { connect } from 'umi';
import { Form, Modal, ConfigProvider, DatePicker } from 'antd';
import moment from 'moment';
import { QuickForm } from 'vv-frontend-components';
import './index.less';

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 }
};
const EditDate = ({
    Visible,
    params, // 传入的参数
    onOk, // 关闭模态框
    onCancel, // 关闭模态框
    dispatch,
    form,
    loading
}) => {
    const { cancleDetail, fetchList } = params;
    const { talentName, entryDate } = cancleDetail;
    const config = [
        {
            field: 'talentName',
            label: '员工姓名',
            key: 'talentName',
            props: {
                ...formItemLayout
            },
            component: <div style={{ color: '#000', fontWeight: '400' }}>{talentName}</div>
        },
        {
            field: 'entryDate',
            label: '入职日期',
            key: 'entryDate',
            props: {
                ...formItemLayout
            },
            config: {
                initialValue: moment(entryDate)
            },
            component: <DatePicker allowClear={false} />
        }
    ];

    // 修改入职日期
    const handleOk = closeModel => {
        form.validateFields((err, values) => {
            if (!err) {
                dispatch({
                    type: 'entryManagement/editDate',
                    payload: {
                        entryDate: values.entryDate.format('YYYY-MM-DD'),
                        id: cancleDetail.id
                    },
                    success: () => {
                        fetchList({ pageNo: 1 });
                    }
                });
                // 关闭模态框
                closeModel();
                form.resetFields();
            }
        });
    };
    return (
        <Modal
            title="编辑入职时间"
            width="400px"
            visible={Visible}
            confirmLoading={loading}
            wrapClassName="editdata"
            onOk={() => {
                handleOk(onOk);
            }}
            centered
            onCancel={() => {
                onCancel();
                form.resetFields();
            }}
        >
            {/* <Spin spinning={loading}> */}
            <ConfigProvider getPopupContainer={trigger => trigger.parentNode}>
                <Form layout="horizontal">
                    <QuickForm config={config} form={form} />
                </Form>

                {/* </Spin> */}
            </ConfigProvider>
        </Modal>
    );
};

export default connect(({ entryManagement, loading }) => ({
    entryManagement,
    loading: loading.models.entryManagement
}))(Form.create()(EditDate));
